<template>
    <div>
        <hd-tab :tabs="tabs"></hd-tab>

        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span>权限菜单</span>
                <hd-alert :alert="{type:'success'}">正在为角色：【{{ role.title }}】设置权限</hd-alert>

            </div>
            <el-tree
                ref="tree"
                :check-on-click-node="true"
                :data=permissions
                :props=" { children: 'children', label: 'title' }"
                current-node-key
                default-expand-all
                highlight-current
                node-key="name"
                show-checkbox
                @check-change="check"
            >
            </el-tree>

        </el-card>
        <el-button-group>
            <el-button class="mt-3" type="primary" @click="onSubmit">保存</el-button>
        </el-button-group>
    </div>
</template>

<script>
import tabs from './tabs'


export default {
    route: {path: 'admin/role/:id/permission/edit'},
    data() {
        return {
            tabs,
            rid: this.$route.params.id,
            permissions: [],
            role: {},
            form: {permissions: []},
            rolehasPermissions: [],
        };
    },
    async created() {
        await this.getAllPermissions()
        this.role = await this.axios.get(`admin/role/${this.rid}`)
        this.rolehasPermissions = await axios.post(`admin/role/${this.rid}/rolehasPermissions`, this.role)
        this.$refs.tree.setCheckedNodes(this.rolehasPermissions)
    },

    methods: {
        async getAllPermissions() {
            this.permissions = await this.axios.get('admin/permission/getAllPermissions')
        },
        async onSubmit() {
            await this.axios.post(`admin/role/${this.rid}/syncPermissions`, this.form)
        },
        check() {
            this.form.permissions = this.$refs.tree.getCheckedKeys();
        }
    }
}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>
